﻿@{
    ViewBag.Title = "Window : Set Height and Width";
}

<h2>Window : Set Height and Width</h2>

<h3>Sample</h3>

<div style="height:250px;"">
    <button id="showWindowButton" onclick="showWindow()" style="display:none;">Show Window</button>
@{
    Html.Telerik().Window()
        .Name("SampleWindow")
        .Content(
            @<text>
            <div style="margin-bottom:10px;">
            Current Height: <span id="currentHeight">200</span><br />
            Current Width: <span id="currentWidth">500</span>
            </div>
            <div style="margin-bottom:10px;">
            New Height: @Html.TextBox("newHeightTextBox") <button onclick="newHeight()">Apply</button>
            </div>
            <div style="margin-bottom:10px;">
            New Width: @Html.TextBox("newWidthTextBox") <button onclick="newWidth()">Apply</button>
            </div>
            </text>
        )
        .Width(500)
        .Height(200)
        .ClientEvents(events => events.OnClose("SampleWindow_OnClose"))
        .Render();
}
</div>

<h3>Documentation</h3>
<p>
The window height and width are changed by calling the setHeight() and setWidth() functions.  Both
setHeight() and setWidth() take a parameter of type integer for the new height or width.

Here are examples of setting the height to 300 and the width to 600:
</p>

<pre class="code">
$('#SampleWindow').data('tWindow').setHeight(300);
$('#SampleWindow').data('tWindow').setWidth(600);
</pre>

<script type="text/javascript">
    newHeight = function() {
        var height = parseInt($('#newHeightTextBox').val());

        if (isNaN(height) == false) {
            $('#SampleWindow').data('tWindow').setHeight(height);
            $('#currentHeight').text(height);
        }
    }
    newWidth = function() {
        var width = parseInt($('#newWidthTextBox').val());

        if (isNaN(width) == false) {
            $('#SampleWindow').data('tWindow').setWidth(width);
            $('#currentWidth').text(width);
        }
    }
    SampleWindow_OnClose = function(e) {
        $('#showWindowButton').css('display', '');
    }
    showWindow = function() {
        $('#showWindowButton').css('display', 'none');
        $('#SampleWindow').data('tWindow').open();
    }
</script>